<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <countButton></countButton><!--使用组件-->
    <count-button></count-button><!--使用组件-->
    <count-button></count-button><!--使用组件-->
</div>
<script type="text/javascript" src="../js/vue-2.6.12.js"></script>
<script>
    /*注册组件*/
    Vue.component("countButton",{
        template:"<button @click='changeNum'>我是按钮,被点击了{{count}}{{msg}}</button><a>aaa</a>",
        data:function(){//组件中定义的数据不能是一个json对象,而是一个函数
            return {count:0,msg:"hello world"};
        },
        methods:{
           changeNum(){
               this.count++;
           }
        }
    })
    const vm = new Vue({
        el:"#app"
    })
</script>
</body>
</html>